<template>
  <div>

    <sticky :class-name="'sub-navbar'" :z-index="10">

      <el-dropdown
        split-button trigger="click" type="primary">
        <!--        <el-button-->
        <!--          style="margin-left: 10px;" type="primary">-->
        <!--          新增半成品-->
        <!--        </el-button>-->
        配置方式
        <el-dropdown-menu class="azure-dropdown" slot="dropdown">
          <el-dropdown-item>
            <el-switch
              active-text="new transfer Mode 穿梭框"
              inactive-text="drawer Mode 抽屉待完善"
              v-model="isNewConfigMode"/>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>


      <el-button @click="$router.back()" type="info">
        返回全部产品列表
      </el-button>
    </sticky>

    <el-card>
      <el-alert
        :closable="false"
        :title="`${linkFrom}基本信息修改`"
        effect="dark"
        show-icon
        style="margin-bottom: 15px;"
        type="success"
      />
      <!--  产品基本信息,内部包含了修改,因为修改的逻辑是通用的,实在是不同的在外面传给内部组件  -->
      <ProductBaseInfoForm
        :isUpdate="true"
        :modifyData.sync="modifyData"/>
    </el-card>

    <!--      // linkFrom linkTo-->

    <!--  产品列表,已有的,不需要分页 -->
    <!--  产品配置  -->
    <el-card
      style="margin-top: 15px;"
      v-if="!isNewConfigMode">
      <ProductRelateConfig
        :modifyData="modifyData"
        :tableData="hasRelateList"
        @tableDataUpdate="tableDataUpdate"/>
    </el-card>

    <ProductRelateConfigTransfer
      @tableDataUpdate="tableDataUpdate"
      :hasRelateList.sync="hasRelateList"
      :modifyData="modifyData"
      @refreshData="handleRefreshData"
      v-else/>

    <!--    transfer mode    -->
  </div>
</template>

<script>

  //  产品列表
  import { ModifyProductComponent, PageQueryProduct, QueryProductComponent } from '@/api/productInformation'
  import AzureDynamicTable from '@/components/ATheFridayClub/mDynamicTable/AzureDynamicTable'
  import { ERR_OK } from '@/utils/commons'
  import layoutMixin from '@/mixins/layoutMixin'
  import Sticky from '@/components/Sticky/index'
  import AButton from '@/components/ATheFridayClub/AButton'
  import { createProductFactory, productBaseCols } from '@/views/baseproduct/mixins/productUtil'
  import ShowAllProductList from '@/views/baseproduct/components/product/ShowAllProductListDrawer'
  import ProductBaseInfoForm from '@/views/baseproduct/components/product/ProductBaseInfoForm'

  import productMixin from '@/views/baseproduct/components/product/productMixin'
  import { productTypesEnum } from '@/enums/product'
  import ProductRelateConfig from '@/views/baseproduct/components/product/ProductRelateConfig'
  import ProductRelateConfigTransfer from '@/views/baseproduct/components/product/ProductRelateConfigTransfer'
  import { dataStatusTypesEnum } from '@/enums/common'

  const columnDesObjs = Array.of(
    ...productBaseCols,

    { key: 'operator', label: '操作', width: '180' }
  )

  export default {
    name: 'editProductInfo',
    components: {
      ProductRelateConfigTransfer,
      ProductRelateConfig,
      ProductBaseInfoForm, ShowAllProductList,
      AButton, AzureDynamicTable, Sticky
    },
    mixins: [layoutMixin, productMixin],
    data() {
      return {
        isNewConfigMode: true,

        modifyData: {}, //  编辑的或新增的数据
        hasRelateList: Array.of()  //  产品目前的组件,已经包含的关联关系列表

        //  产品已有的列表
        // searchFormData: {
        //   // productType: null,  //  el-select 匹配不到会显示一个奇怪的值,必须为null
        //   page: 1,
        //   limit: 10
        // },
        // total: 0,

      }
    },
    computed: {
      // isNewData() {
      //   const { ProductId, Code: code } = this.$route.query
      //   return ProductId && code
      // }

      //  ProductType
      proxyProductType() {
        const { modifyData: { ProductType } } = this
        return ProductType
      }
    },

    async created() {
      // const loading = this.$loading({
      //   lock: true,
      //   text: '正在加载🤣🎶😜✔🐱‍🏍✨👍👌👌🎁🎉🎉🎉👏🤔',
      //   spinner: 'el-icon-loading',
      //   background: 'rgba(0, 0, 0, 0.7)'
      // })
      await this.getBaseData()  //  获取产品id查询基础信息
      await this.getRelateData()  //  获取关联关系
      //  修改 route :: title
      // loading.close()

    },
    methods: {
      tableDataUpdate(newTableData) {
        this.hasRelateList = newTableData
      },

      //  删除关系
      handleDeleteProduct() {
        //  直接本地删除table中的,之后调用 submitModify
      },

      //  删除,新增 调用  { status } = {}
      submitModify() {
        try {
          const { hasRelateList } = this
          const { Code } = ModifyProductComponent(hasRelateList)
          if (Code === ERR_OK) {
            this.$message.success('保存{产品}{xx}关系成功')
          }
        } catch (e) {
          console.log(e)
        }
      },

      handleRefreshData({ deleteIds }) {
        this.getRelateData()
        // const deleteIndexList = deleteIds.reduce((acc, id) => {
        //   return [...acc, this.hasRelateList.findIndex(v => v.partId === id)]
        // }, [])
        //
        // deleteIndexList.forEach(id => this.hasRelateList.splice(id, 1))

      },

      //  查询当前产品关联的组件信息
      async getRelateData() {
        //  if 套系 >>> show 产品 list
        //  if 产品 >>> show 组件 list
        // const { ProductType } = this.modifyData
        try {
          const { ProductId, Code: code } = this.$route.query ?? {}
          const { Code, Result } = await QueryProductComponent({
            productId: ProductId, componentId: 0
          })
          if (Code === ERR_OK) {
            this.hasRelateList = Result.map(v => {
              const { ProductId, ...other } = v.part
              return ({ ...v, ...other, ProductId: v.productId })
            }).filter(v => v.status === dataStatusTypesEnum['正常'])

            //  不要分页,滚动形式..... el限制表格高度就行了
          }
        } catch (e) {
          console.log(e)
        }
      },

      async getBaseData({} = {}) {
        const { ProductId: productId, Code: code } = this.$route.query
        try {
          const { Code, Result } = await PageQueryProduct({ code, productId })
          if (Code === ERR_OK) {
            const { CurrentPage, RecordCount, Rows } = Result;
            ({ [0]: this.modifyData = {} } = Rows)
          } else {
            this.$message.warning('获取产品的详情信息失败')
          }
        } catch (e) {
          console.log(e)
        }
      },

      //  对于产品的新增和修改能否抽离出去,便于日后的维护.
      //  视图根据 type 来判断 add or update
      //  新增和修改产品信息
      // beforeAnimateClose() {
      //   //  modifyFormData :: reset
      //
      // },

      createProductSubmit() {
        //  validate modifyFormData

        //  call modifyInterface

        // if success close dialog
      },

      editProductSubmit() {
        //  validate modifyFormData

        //  call modifyInterface

        // if success close dialog

      }

    }
  }
</script>

<style lang="scss" scoped>

</style>
